<template>
	<view>
		<!-- bar -->
		<!-- <p-navbar title="交易"></p-navbar> -->
		<view class="hq" @tap="trigger">
			<view>交易</view>
		</view>
		<view :style="{}">
			<u-tabs-swiper class="tabs" active-color="#F3C31B" inactive-color="#A6ADB4" bg-color="bg" bar-width="60" :active-item-style="styles" ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- 内容 -->
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper">
			<!-- 现货 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
					<!-- goodindex 下标 goodlist 列表 gloading 状态  balance当前仓位-->
					<goods :goodindex.sync="goodindex" :goodlist.sync="goodlist" :gloading.sync="loading.gloading" @goodlistes="goodlistes" :balance="balance"/>
				</scroll-view>
			</swiper-item>
			<!-- 合约量化 -->
			<!-- <swiper-item  class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
				<contract />
				</scroll-view>
			</swiper-item> -->
			<!-- 一键跟单 -->
			<!-- <swiper-item class="" style="padding: 0rpx;margin: 0rpx;">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
				<documentary />
				</scroll-view>
			</swiper-item> -->
		</swiper>
		
	</view>
</template>

<script>
	import goods from './components/goods.vue';//现货
	import contract from './components/contract.vue'//合约
	import documentary from './components/documentary.vue'//追单
	export default {
		components:{
			goods,
			contract,
			documentary
		},
		data() {
			return {
				list: [{
					name: '现货量化'
				}, {
					name: '合约量化'
				}, {
					name: '一键跟单'
				}],
				bg:'#011934',//bar背景
				styles:{//当前活动Item的样式
					'font-size':'32rpx'
				},
				goodindex:0,//现货量化组件下标
				goodlist:[],//现货量化组件列表
				page:1,
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loading:{
					gloading:'loadmore'
				},//下拉加载
				balance:{},//当前仓位余额
			};
		},
		
		watch:{
			 goodindex:{//标题切换 或 下单后下标会变成1 执行
			    handler(val){
				  if(val=='1'){//执行中
				      // this.goodlist=[]
					  this.page=1
					  this.listes()//执行中列表
					  this.balances()//仓位余额
				  }
			    },
			    deep:true
			  },
			  current:{//页面切换
				  handler(val){
					this.scrolltolower(true)
				  },
				  deep:true
			  },
		},
		onShow() {
			this.$state.sybom.sybom=0//下单类型 稳健 or 自定义
			if(this.$Route.query.type){//下单后返回到执行中页面
				this.goodindex=JSON.parse(this.$Route.query.type)
			}
			// this.goodindex=1
		},
		methods:{
			 listes(){//执行中列表
				this.loading.gloading='loading'
				this.request(`order/list?orderType=0&pageSize=20&page=${this.page}`).then( async res=>{
					if(res.data.data.length!=0){
						let data=res.data.data
						for(let i =0;i<data.length;i++){
							data[i].check=false
							if(data[i].orderState=='-1'){//异常单抛错字段
								data[i].startic=await this.Message(data[i].orderCode)
							}
						}
						this.loading.gloading='loadmore'
						if(this.page=='1'){
							this.goodlist=data
						}else{
							this.goodlist.push(...data)
						}
					}else{
						this.loading.gloading='nomore'
					}
				})
			},
			Message(t){//异常单抛错
				return new Promise((resole,reject)=>{
					this.request({
						url:'/order/abnormalOrdersMessage',
						params:{orderCode:t}
					}).then(res=>{
						let data=res.data.data
						let start=JSON.parse(res.data.data.errorInfo)['err-msg']
						if(start.indexOf('没有权限')!='-1'){
							resole('API没有权限')//币量不足
						}
						if(data.orderType=='buy-market'){
							resole('USDT不足')//usdt 不足
						}else if(data.orderType=='sell-market'){
							resole('币量不足')//币量不足
						}
					})
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				if(index!='0') return this.util.toast('暂未开通');
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
				this.loading.gloading='loadmore'//切换加载更多
			},
			animationfinish(e) {// swiper滑动结束，分别设置tabs和swiper的状态
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;//内容切换
				this.current = current;//标题切换
			},
			// scroll-view到底部加载更多
			scrolltolower(e=false) {
				if(e==true){//切换内容
					this.page=1 
					this.goodlist=[]
				}else{//下拉
					this.page++
				}
				if(this.goodindex=='1' && this.swiperCurrent=='0'){//现货执行中下拉
					this.listes()
				}else if(this.swiperCurrent=='1'){//合约
					console.log('合约量化')
				}else{//一键跟单
					console.log('一键跟单')
				}
			},
			goodlistes(e){//e=='1' 策略
				if(e=='1'){//修改策略类型触发
					this.goodlist=[]
					this.page=1
					this.listes()//执行中列表
					this.balances()
				}
			},
			balances(){//仓位余额
				this.request('order/getUSDTBalance').then(res=>{
					if(!res.data.data) return;
					this.balance=res.data.data
				})
			},
			trigger(){
				this.$Router.pushTab({ path: '/pages/home/home'})
			},
		}
	}
</script>
<style lang="scss">
	.hq {
		@include flex;
		justify-content: center;
		padding-top: 50rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 52px;
		color: #000000;
		&::before{
			content: '';
			height: 35rpx;
			width: 20rpx;
			background-image: url(../../static/icon-back-black.png);
			@include background;
			position: absolute;
			left: 40rpx;
		}
	}
	.swiper{
		height: 1120rpx;
		/*  #ifdef  APP-PLUS  */
		height: 85vh;
		/*  #endif  */
	}
	.swiper-item{
		padding: 0rpx 30rpx;
		width: 92.5% !important;
		// border: 1px solid red;
	}
	.scroll-y{
		height: 1115rpx;
		
		/*  #ifdef  APP-PLUS  */
		height: 85vh;
		/*  #endif  */
		// border: 1px solid red;
	}
	
</style>
